<template>
  <el-header class="header">
    <h1 class="system-title">智能社区管理系统</h1>
    <div>
      <!-- 跳转按钮 -->
      <el-button type="primary" plain @click="goToUserPage" class="user-page-button">切换到用户端</el-button>
    </div>
    <div class="user-info">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <el-avatar :size="40" :src="userInfo.image"></el-avatar>
          <span class="username">&nbsp; {{ userInfo.username }}</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="personal">个人中心</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script>
export default {
  props: {
    userInfo: {
      type: Object,
      default: () => ({
        username: '',
        image: ''
      }),
    }
  },
  data() {
    return {
    };
  },
  methods: {
    handleCommand(command) {
      if (command === 'logout') {
        this.logout();
      } else if (command === 'personal') {
        this.$router.push('/property/personal');
      }
    },
    logout() {
      this.$confirm('确认退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('已退出登录');
        this.$router.push('/login');
      });
    },
    // 跳转到用户端
    goToUserPage() {
      this.$router.push('/owner/home');
    }
  }
};
</script>

<style scoped>
.header {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px;
}

.system-title {
  margin: 0;
  font-size: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.user-info {
  display: flex;
  align-items: center;
}

.username {
  font-size: 18px;
  margin-right: 10px;
}

/* 用户端按钮样式 */
.user-page-button {
  margin-right: 20px; /* 设置按钮右侧间距 */
  background-color: transparent; /* 设置按钮背景透明 */
  border-color: #409EFF; /* 设置按钮边框颜色 */
  color: #409EFF; /* 设置按钮文字颜色 */
}

.user-page-button:hover {
  background-color: rgba(64, 158, 255, 0.1); /* 设置按钮悬停时的背景颜色 */
}
</style>